<template>
  <div class="svg-wrapper">
    <svg
      width="400"
      height="300"
      :viewBox="`0 0 ${viewBoxSize.width} ${viewBoxSize.height}`"
    >
      <circle cx="100" cy="100" r="50" fill="blue" />
    </svg>
    <div class="actions">
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      viewBoxSize: {
        width: 400,
        height: 300
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    zoomIn() {
      this.viewBoxSize.width *= 1.1 // 放大viewBox会缩小内容
      this.viewBoxSize.height *= 1.1 // 放大viewBox会缩小内容
    },
    zoomOut() {
      this.viewBoxSize.width *= 0.9 // 缩小viewBox会放大内容
      this.viewBoxSize.height *= 0.9 // 缩小viewBox会放大内容
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.svg-wrapper {
  height: 100%;
  position: relative;
  svg {
    border: 1px solid #ccc;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
